<template>
    <view class="gift-main-pay">
        <view class="gift-main-pay-left">
            <img src="@/assets/image/icon25.png" alt="">
            <text>{{ state.userInfo.Money }}</text>
            <view class="gift-main-pay-btn" @click="state.show = true">
                <text>充值</text>
                <img src="@/assets/image/icon29.png" alt="">
            </view>
        </view>
        <van-button type="primary" :loading="state.isGiftLoading" @click="sendGiftFn">发送</van-button>
    </view>
    <van-popup v-model:show="state.show" position="bottom" teleport="body" round close-icon="close" closeable>
        <view class="top-up-box">
            <view class="top-up-head">
                <view class="top-up-head-left">
                    <text>余额：</text>
                    <img src="@/assets/image/icon25.png" alt="">
                    <text>{{ state.userInfo.Money }}</text>
                </view>
                <view class="top-up-head-center">
                    充值
                </view>
            </view>
            <SendOrderItem @update:topUpPrice="ev => state.amount = ev" />
            <PayOrderList @update:payWayType="ev => state.payWay = ev.payWay" :isGold="true" />
            <SendOrderAgreement />
            <van-button type="primary" :loading="state.isLoading" class="top-up-confirm" @click="payFn()">确定</van-button>
        </view>
    </van-popup>
</template>
    
<script setup>
import { reactive, getCurrentInstance, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import PayOrder from "@/pages/home/components/payOrder/index.vue"
import SendOrderItem from "@/pages/home/components/sendOrderItem/index.vue"
import SendOrderAgreement from "@/pages/home/components/sendOrderAgreement/index.vue"
import PayOrderList from "@/pages/home/components/payOrder/payOrderList/index.vue"
import { showToast } from 'vant';
import { onLoad } from '@dcloudio/uni-app'
import {
    PayCurOrder
} from "@/api/person/index.js"

let { proxy } = getCurrentInstance()

const props = defineProps(['itemCurGift', 'userImId'])

// itemCurGift 选中礼物

import {
    UserInfo,
    OnePhotos, // 获取照片
} from "@/api/person/index.js"

const state = reactive({
    show: false,
    curIndex: false,
    userInfo: {},
    amount: {},
    isLoading: false,
    payWay: 0,
    isGiftLoading: false,
    userIMId:null
})

onMounted(() => {
    UserInfoData()
})
onLoad((options) => {
    state.userIMId = options.userIMId ? options.userIMId : props.userImId
})
import { AuthStateStore } from "@/store/authIndex.js"
let AuthStore = AuthStateStore()
const UserInfoData = async () => {
    let data = await proxy.$get(UserInfo + getAuthorization('userId'))
    if (data.code == 200) {
        let userInfo = JSON.stringify(data.data)
        state.userInfo = data.data
        AuthStore.updateUserInfo(userInfo)
    }
}

import {
    IMGift
} from "@/api/person/index.js"

let emit = defineEmits(['successAction'])
const giftFn = async () => {
    let ImId = JSON.parse(getAuthorization("userInfo")).IMId
    let params = {
        "giftList": [{ "count": 1, "giftID": props.itemCurGift.ID }],
        "toUserIMID": state.userIMId,
        "userID": ImId,
        "sourceType": 3
    }
    state.isGiftLoading = true
    try {
        let data = await proxy.$post(IMGift, params)
        state.isGiftLoading = false
        if (data.code == 200) {
            state.userInfo.Money = data.data
            emit('successAction',props.itemCurGift)
            showToast('礼物发送成功');
        } else {
            showToast(error.message);
        }
    } catch (error) {
        state.isGiftLoading = false
        showToast(error.message);
    }

}

const sendGiftFn = () => {
    let { ID, Money } = props.itemCurGift
    if (!ID) {
        showToast('请选择礼物');
        return
    }
    if (state.userInfo.Money < Money) {
        showToast('余额不足，请充值');
        return
    }
    giftFn()
}

const payFn = async () => {
    console.log(state)
    let params = {
        "PaySource": 1,
        "orderDesc": "购买金币",
        "itemType": 0,
        "userId": getAuthorization('userId'),
        "TreadType": 4,
        "priceId": props.itemCurGift.ID,
        "order_Money": props.itemCurGift.Money,
        "num": 1,
        "orderType": 0,
        "payWay": state.payWay,
        "payPage": "聊天界面"

    }
    state.isLoading = true
    try {

        let data = await proxy.$post(PayCurOrder, params)
        state.isLoading = false
        var resData = data.data.contentMap
        document.getElementById('payMent').innerHTML = resData;
        let _value = document.getElementById('biz_content').value;
        let _value_sign = document.getElementById('sign').value;
        let _after_value = decodeURIComponent(_value);
        let _after_sign_value = decodeURIComponent(_value_sign);
        document.getElementById('biz_content').value = _after_value// _after_value
        document.getElementById('sign').value = _after_sign_value;
        document.forms[0].setAttribute('target', '_self') // 当前窗口跳转
        document.forms['payform'].submit();
    } catch (error) {

        state.isLoading = false
    }

}


</script>
    
<style lang="scss" scoped>
.gift-main-pay {
    background: #fff;
    display: flex;
    width: 100%;
    padding: 10rpx 30rpx 30rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .gift-main-pay-left {
        display: flex;
        font-size: 28rpx;
        color: #262626;
        align-items: center;

        img {
            width: 36rpx;
            height: 36rpx;
            margin-right: 10rpx;
        }

        text {
            font-size: 28rpx;
            color: #262626;
        }

        .gift-main-pay-btn {
            margin-left: 40rpx;
            display: flex;
            align-items: center;

            img {
                width: 24rpx;
                height: 24rpx;
                margin-left: 5rpx;
            }
        }
    }

    .van-button {
        height: 56rpx;
        line-height: 56rpx;
        font-size: 28rpx;
    }
}

.top-up-head {
    .top-up-head-left {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        padding: 30rpx;
        position: relative;

        text:nth-child(1) {
            color: #666;
        }

        img {
            width: 36rpx;
            margin-right: 10rpx;
        }
    }

    .top-up-head-center {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 30rpx;
        font-size: 32rpx;
        font-weight: 600;
    }
}

.top-up-confirm {
    width: calc(100% - 60rpx);
    margin: 10rpx 30rpx 30rpx 30rpx;
    font-size: 32rpx;
}
</style>
    